<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import {v4 as uuidv4} from 'uuid';

const uploaderRef = ref();

const formdata = ref({
  username: '',
  password: '',
  userTouxiang: '',
  phone: '',
  merchantName: '',
  merchantIntroduction: '',
  bg: '',
  position: '',
});

const previewImages = ref('');
const resetForm =()=>{
  formdata.value={
    username: '',
    password: '',
    userTouxiang: '',
    phone: '',
    merchantName: '',
    merchantIntroduction: '',
    bg: '',
    position: ''
  };
  if (uploaderRef.value) {
    (uploaderRef.value as any).clearFiles();
  }
}
const handleSubmit = () => {
  uploaderRef.value.submit();
}
const handleSuccess = (response:any) =>{
  formdata.value.userTouxiang=response.msg;
  axios.post('http://localhost:8080/user/register',formdata.value).then(res=>{
  })
}
const handleError = () =>{
  console.log('上传失败')
}

</script>
<template>
    <div class="register-container">
      <el-card class="register-card" shadow="hover">
        <h1>商家入驻</h1>
        <el-form :model="form" ref="registerForm" label-width="100px">
          <el-form-item label="账号" prop="username">
            <el-input v-model="formdata.username" placeholder="请输入用户名" clearable />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="formdata.password" type="password" placeholder="请输入密码" clearable />
          </el-form-item>
          <el-form-item label="用户头像" prop="userTouxiang">
            <el-upload
                    ref="uploaderRef"
                    class="upload-demo"
                    drag
                    :auto-upload="false"
                    :limit="1"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    action="http://localhost:8080/user/uploadUserTouxiang" 
                    multiple>
              <img v-if="previewImages!=''" :src="previewImages" alt="Preview Image" style="width: 80px; height: 80px;" />
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                拖拽头像至此<em>点击上传</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    图片大小小于500kb
                </div>
            </template>
            </el-upload>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formdata.phone" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item label="商家名称" prop="merchantName">
            <el-input v-model="formdata.merchantName" placeholder="请输入商家名称" clearable />
          </el-form-item>
          <el-form-item label="商家介绍" prop="merchantIntroduction">
            <el-input
              type="textarea"
              v-model="formdata.merchantIntroduction"
              placeholder="请输入商家介绍"
              rows="3"
            />
          </el-form-item>
          <el-form-item label="商铺头像链接" prop="touxiang">
            <el-input v-model="formdata.touxiang" placeholder="请输入头像链接" clearable />
          </el-form-item>
          <el-form-item label="背景图片链接" prop="bg">
            <el-input v-model="formdata.bg" placeholder="请输入背景图片链接" clearable />
          </el-form-item>
          <el-form-item label="位置" prop="position">
            <el-input v-model="formdata.position" placeholder="请输入位置" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button type="default" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <style scoped>
  .register-container {
    max-width: 600px;
    margin: 50px auto;
  }
  .register-card {
    padding: 20px;
  }
  </style>